/* eslint-disable react/jsx-no-bind */
import React, {useCallback, memo} from 'react';
import {Table, Alert} from 'antd';
import omit from 'omit.js';
import {TableProps, TablePaginationConfig} from 'antd/es/table/index.d';
import {pager2antd, pager2serve} from '@/utils/utils';
/* eslint-disable import/extensions */
import {FormatPaginationProps} from '@/utils/utils.d';
import styles from './index.less';

export interface AlertTableProps extends TableProps<{}> {
    oprations?: React.ReactNode;
    type?: 'info' | 'error' | 'success' | 'warning';
    pagination: FormatPaginationProps;
}

const defaultPagination = {
    current: 1,
    pageSize: 10,
    responsive: true,
    pageSizeOptions: ['10', '20', '50', '100', '300'],
} as TablePaginationConfig;

const AlertTable: React.FC<AlertTableProps> = props => {
    const {
        dataSource,
        rowSelection,
        type = 'info',
        oprations,
        pagination,
        onChange
    } = props;

    let formatPagination = Object.assign(defaultPagination, pagination) as TablePaginationConfig;
    let newTotal = dataSource?.length || 0;

    if (pagination?.total || pagination?.total === 0) {
        newTotal = pagination.total;
    }

    if (pagination?.pageNum != null || pagination?.count != null) {
        const newPagination = pager2antd(pagination);
        formatPagination = Object.assign(defaultPagination, newPagination);
        if (formatPagination?.total) {
            newTotal = formatPagination.total;
        }
    }
    let selectionNode = null as React.ReactNode;
    if (rowSelection) {
        const {selectedRowKeys} = rowSelection;
        selectionNode = (
            <>
                ，已选择
                {selectedRowKeys?.length || 0}
                条数据
            </>
        );
    }

    const handleChange = useCallback((pager, filters, sorter, extra) => {
        let formatPager = pager;
        if (pagination?.pageNum != null || pagination?.count != null) {
            formatPager = pager2serve(pager);
        }
        // @ts-ignore
        if (typeof onChange === 'function') {
            onChange(formatPager, filters, sorter, extra);
        }
    }, [onChange, pagination]);

    return (
        <>
            <Alert
                type={type}
                message={(
                    <div className={styles.alert}>
                        <div>
                            共计
                            <span className={styles.blue}>
                                {newTotal}
                            </span>
                            条数据
                            {selectionNode}
                        </div>
                        <div>
                            {oprations}
                        </div>
                    </div>
                )}
            />
            <div className={styles.mt10}>
                <Table
                    {...omit(props, [
                        'type',
                        'pagination',
                        'onChange'
                    ])}
                    pagination={formatPagination}
                    onChange={handleChange}
                />
            </div>
        </>
    );
};
export default AlertTable;
